<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iwiotss</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='title.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='center.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}" type="image/x-icon">
    <script>
        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

        if (isMobile) {
            window.location.href = "/m";
        }
        // window.onload = function () {
        //     function getWindowInfo() {
        //         const windowInfo = {
        //             width: window.innerWidth,
        //             height: window.innerHeight // 修正了属性名
        //         };
        //         if (windowInfo.width <= 1200) {
        //             window.location.href = "/m"; // 确保这里的URL是有效的
        //         }
        //     }

        //     // 初始调用，检查页面加载时的窗口大小
        //     getWindowInfo();

        //     // 监听窗口大小变化事件
        //     window.addEventListener('resize', getWindowInfo);
        // };  
    </script>
</head>

<body>
    <div class="title">
        <div class="top">
            <div class="logo"><a href="/">Iwiotss</a></div>
            <ul>
                <li><a href="{{ url_for('home') }}">首页</a></li>
                <li><a href="{{ url_for('about') }}">关于</a></li>
                <li><a href="{{ url_for('login') }}">登录</a></li>
            </ul>
        </div>
    </div>
    <div class="bodyCenter">
        <div class="card" id="temperature">
            <a href="/statistics/temperature">
                <div class="tit">
                    温度
                </div>
                <p>摄氏{{ sensor1.get_temperature() }}度</p>
            </a>
        </div>
        <div class="card" id="humidity">
            <a href="/statistics/humidity">
                <div class="tit">
                    湿度
                </div>
                <p>百分之{{ sensor1.get_humidity() }}</p>
            </a>
        </div>
        <div class="card" id="pressure">
            <a href="/statistics/pressure">
                <div class="tit">
                    压力
                </div>
                <p>{{ sensor1.get_pressure() }}帕斯卡</p>
            </a>
        </div>
        <div class="card" id="device_count">
            <div class="tit">
                设备量
            </div>
            <p>{{ device_number }}台</p>
            <label for="sensors">选择传感器</label>
            <select id="sensors" name="sensors">
                <option value="sensor1">传感器1</option>
                <option value="sensor2">传感器2</option>
                <option value="sensor3">传感器3</option>
                <option value="sensor4">传感器4</option>
            </select>
            <script>
                $('#sensors').change(function () {
                    $value = $('#sensors').val();
                    if ($value == 'sensor1') {
                        $('#temperature p').html("摄氏" + {{ sensor1.get_temperature() }} + "度");
                $('#humidity p').html("百分之" + {{ sensor1.get_humidity() }});
                $('#pressure p').html({{ sensor1.get_pressure() }} + "帕斯卡");
                $('#power p').html({{ sensor1.get_power() }} + "瓦特");
                $('#power_consumption p').html({{ sensor1.get_power_consumption() }} + "千瓦时");
                } else if ($value == 'sensor2') {
                    $('#temperature p').html("摄氏" + {{ sensor2.get_temperature() }} + "度");
                $('#humidity p').html("百分之" + {{ sensor2.get_humidity() }});
                $('#pressure p').html({{ sensor2.get_pressure() }} + "帕斯卡");
                $('#power p').html({{ sensor2.get_power() }} + "瓦特");
                $('#power_consumption p').html({{ sensor2.get_power_consumption() }} + "千瓦时");
                } else if ($value == 'sensor3') {
                    $('#temperature p').html("摄氏" + {{ sensor3.get_temperature() }} + "度");
                $('#humidity p').html("百分之" + {{ sensor3.get_humidity() }});
                $('#pressure p').html({{ sensor3.get_pressure() }} + "帕斯卡");
                $('#power p').html({{ sensor3.get_power() }} + "瓦特");
                $('#power_consumption p').html({{ sensor3.get_power_consumption() }} + "千瓦时");
                } else if ($value == 'sensor4') {
                    $('#temperature p').html("摄氏" + {{ sensor4.get_temperature() }} + "度");
                $('#humidity p').html("百分之" + {{ sensor4.get_humidity() }});
                $('#pressure p').html({{ sensor4.get_pressure() }} + "帕斯卡");
                $('#power p').html({{ sensor4.get_power() }} + "瓦特");
                $('#power_consumption p').html({{ sensor4.get_power_consumption() }} + "千瓦时");
                }
            });
            </script>
        </div>
        <div class="card" id="power">
            <a href="/statistics/power">
                <div class="tit">
                    功率
                </div>
                <p>{{ sensor1.get_power() }}瓦特</p>
            </a>
        </div>
        <div class="card" id="power_consumption">
            <a href="/statistics/power_consumption">
                <div class="tit">
                    总耗电量
                </div>
                <p>{{ sensor1.get_power_consumption() }}千瓦时</p>
            </a>
        </div>
        <!-- <div class="card" id="sensor">
        <div class="tit">
            传感器详情
        </div>
        <p>人在传感器：XXX有人经过</p>
        <p>温度传感器：XXX当前温度XXX</p>
    </div>默认隐藏
    <div class="card" id="device">
        <div class="tit">
            设备详情
        </div>
        <div></div> 可通过数据库或其他方式获取内容
    </div>默认隐藏（切换显示时照片会强行放大），动画效果未做-->
        <div class="card" id="photo">
            <div class="tit">
                实时监控
            </div>
            <div><img src="{{ url_for('static',filename='/img/bgc.jpg') }}"></div>
            <!--替换为实时读取监控照片（可做连播图，规定时间刷新） 或播放监控视频-->
        </div>
    </div>
    <!-- <script>
        var temperature = {{ temperature }};
        if (temperature >= 30) {
            $("#temperature").css({ color: "red" });
        }
        var humidity = {{ humidity }}; //忽略这个报错，这不是错误，flask就是这么写的
        if (humidity >= 50) {
            $("#humidity").css({ color: "red" });
        }
        var pressure = {{ pressure }}; //忽略这个报错，这不是错误，flask就是这么写的
        if (pressure >= 80) {
            $("#pressure").css({ color: "red" });
        }

        $('#device_number').click(function () {
            $('#device').toggle();
        });; //设备量显示隐藏
        $('#temperature').click(function () {
            $('#sensor').toggle();
        });; //传感器显示隐藏
    </script> -->
</body>

</html>